<template>
    <div class="hot-goods">
        <slider :content='sliderImgs'></slider>
        <div class="hot-sale" v-for="(item,index) in realData" :key="index">
            <star-title :content='item.name'></star-title>
            <div class="banner">
                <img :src="item['image_url']" alt="">
            </div>
            <div class="hot-sale-list">
                <buy-spree-integral :content='item.goods'></buy-spree-integral>
            </div>
        </div>
        <!-- <div class="new-product">
            <star-title :content='titleList[1]'></star-title>
            <div class="new-product-list">
                <buy-spree-integral :content='virtual.activityGoodsIntegral'></buy-spree-integral>
            </div>
        </div>
        <div class="hot-in-firends">
            <star-title :content='titleList[2]'></star-title>
            <div class="banner">
                <img src="http://palk082f3.bkt.clouddn.com/image/hot/hot_in_firends.jpg" alt="">
            </div>
            <div class="hot-in-firends-list">
                <buy-spree-integral :content='virtual.activityGoodsIntegral'></buy-spree-integral>
            </div>
        </div>
        <div class="item-product">
            <star-title :content='titleList[2]'></star-title>
            <double-goods :content='virtual.buyGoodGoods'></double-goods>
        </div> -->
        <nothing></nothing>
    </div>
</template>

<script>
import virtualData from './virtual'
import slider from '../../public/slider'
import starTitle from '../../public/starTitle'
import doubleGoods from '../../public/doubleGoods'
import buySpree from '../../public/buySpree' 
import buySpreeIntegral from '../../public/buySpreeIntegral'
import nothing from '../../public/nothing'

export default {
    name:'hot',
    data(){
        return {
            titleList:['口碑好物', '新品抢鲜', '火遍辅食界的嘉宝', '精挑细选·畅销单品'],
            virtual:virtualData,
            sliderImgs:[],
            realData:[]
        }
    },
    methods:{
        getSliders(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.mainSliders+3, null, token, function(res){
                // console.log(res);
                if(res.data['error_code'] == 0){
                    that.sliderImgs = res.data['msg'];
                    that.transferUrl(that.sliderImgs);
                }
            })
        },
        getHotList(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.homeFive+3, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.realData = res.data['msg'];
                    that.transferUrl(that.realData);
                }
            })
        }
    },
    mounted(){
        this.getSliders();
        this.getHotList();
    },
    components:{
        slider,
        starTitle,
        doubleGoods,
        buySpree,
        buySpreeIntegral,
        nothing
    }
}
</script>

<style lang='less'>
@rem:100rem;

.hot-goods{
    width: 750/@rem;
    background: #fff;
    margin-bottom: 96/@rem;
    .hot-sale{
        .banner{
            width: 750/@rem;
            height: 306/@rem;
            img{
                width: 750/@rem;
                height: 306/@rem;
            }
        }
    }
    .hot-sale-list{
        background: #fdd188;
        padding: 6/@rem 0;
        padding-top: 0;
    }
    .new-product-list{
        background: #3db7e1;
        padding-bottom: 6/@rem;
    }
    .hot-in-firends{
        .banner{
            width: 750/@rem;
            height: 306/@rem;
            img{
                width: 750/@rem;
                height: 306/@rem;
            }
        }
        .hot-in-firends-list{
            background: #fec3e1;
            padding-bottom: 6/@rem;
        }
    }
}
</style>
